<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" type="text/css" href="$!{basePath}/content/system/h5/css/common.css" />
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
		<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
		<link rel="stylesheet" type="text/css" href="$!{basePath}/content/system/h5/css/mobile-ui1.0-compress.css"/>
		<script src="$!{basePath}/content/system/h5/js/mobile-ui1.0-compress.js" type="text/javascript" charset="utf-8"></script>
		<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
		<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
		<script src="$!{basePath}/app/js/vue.min.js"></script>
		<script src="$!{basePath}/app/js/axios.min.js"></script>
		<style type="text/css">
			.con ul{
				background-color: #eee;
			}
			.input-style{
				    border: 1px solid #ccc;
				    border-radius: 6px;
			}
			.input-style input{
				height: 1.6rem !important;
			}
		</style>
	</head>
	<body>
		<div class="con">
		 <div class="list-block" >
		    <ul>
		      <!-- Text inputs -->
		      <li>
		        <div class="item-content">
		          <div class="item-media"><i class="icon icon-form-name"></i></div>
		          <div class="item-inner">
		            <div class="item-title label">账户名</div>
		            <div class="item-input">
		              <input type="text" readonly value="$!{username}">
		            </div>
		          </div>
		        </div>
		      </li>
			  <li>
			    <div class="item-content">
			      <div class="item-media"><i class="icon icon-form-name"></i></div>
			      <div class="item-inner">
			        <div class="item-title label">旧密码</div>
			        <div class="item-input input-style">
			          <input type="password" v-model="oldpassword">
			        </div>
			      </div>
			    </div>
			  </li>
			  <li>
			    <div class="item-content">
			      <div class="item-media"><i class="icon icon-form-name"></i></div>
			      <div class="item-inner">
			        <div class="item-title label">新密码</div>
			        <div class="item-input input-style">
			          <input type="password" v-model="newpassword">
			        </div>
			      </div>
			    </div>
			  </li>
			  <li>
			    <div class="item-content">
			      <div class="item-media"><i class="icon icon-form-name"></i></div>
			      <div class="item-inner">
			        <div class="item-title label">确认密码</div>
			        <div class="item-input input-style">
			          <input type="password" v-model="newpasswordtwo">
			        </div>
			      </div>
			    </div>
			  </li>
			 </ul>
			</div>
			<div class="content-block">
			    <div >
			      <div ><a @click="submit" class="button button-big button-fill button-success">确认</a></div>
			    </div>
			  </div>
		</div>
	</body>
</html>
<script type="text/javascript">
	var app=new Vue({
		el:'.con',
		data:{
			oldpassword:"",
			newpassword:"",
			newpasswordtwo:""
		},
		methods:{
			submit(){
				// if(this.oldpassword=""||this.newpassword=""||this.newpasswordtwo==""){
				if(this.oldpassword==""){
					MobileUi.init({
						type: 4,
						title: '提示',
						text: '请输入旧密码',
					})
				}else if(this.newpassword==""){
					MobileUi.init({
						type: 4,
						title: '提示',
						text: '请输入新密码',
					})
				}else if(this.newpasswordtwo==""){
					MobileUi.init({
						type: 4,
						title: '提示',
						text: '请确认密码',
					})
				}else{
					if(this.newpassword!=this.newpasswordtwo){
						MobileUi.init({
							type: 4,
							title: '提示',
							text: '两次密码不一致',
						})
					}else{
						axios({
							url:"/app/home/modifyPwd",
							method:"get",
							params:{
								password: this.newpassword,
								oldPassword: this.oldpassword
							}
						}).then((res)=>{
							if(res.data.success) {
								MobileUi.init({
									type: 4,
									title: '提示',
									text: res.data.msg,
								})
								window.parent.logout();
							} else {
								MobileUi.init({
									type: 4,
									title: '提示',
									text: res.data.msg,
								})
							}
						})
					}
				}
					
			}
		}
	})
</script>